<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        :root {
            --rx: 0deg;
            --ry: 0deg;
            --rz: 0deg;
            --per: 10px;
            --tx: 0px;
            --ty: 0px;
            --tz: 0px;
            --sx: 1;
            --sy: 1;
            --sz: 1;
            --skx: 0deg;
            --sky: 0deg;

        }

        .setting {
            float: left;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 999;
        }

        /* CSS代码 */
        .container {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box {
            display: block;
            background: chartreuse;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d; /* 开启3D视角 */
            transform-origin: center center;
            /* 定义3D旋转效果所需要的属性 */
            transform: perspective(var(--per)) /* 透视，这里设置视角为500像素 */ rotateX(var(--rx)) /* 沿X轴旋转0度 */ rotateY(var(--ry)) /* 沿Y轴旋转0度 */ rotateZ(var(--rz)) /* 沿Z轴旋转0度 */ translateX(var(--tx)) /* X轴的距离，也就是元素距离观察者的距离 */ translateY(var(--ty)) /* Y轴的距离，也就是元素距离观察者的距离 */ translateZ(var(--tz)) /* Z轴的距离，也就是元素距离观察者的距离 */ scaleX(var(--sx)) /* X轴的缩放 */ scaleY(var(--sy)) /* Y轴的缩放 */ scaleZ(var(--sz)) /* Z轴的缩放 */
            /*skewX(var(--skx))*/
            /*skewY(var(--sky));*/;
            transition: all 2s ease; /* 添加动画过渡 */
        }

        .box:hover {
            transform: perspective(200px) /* 透视，这里设置视角为500像素 */ rotateX(0deg) /* 沿X轴旋转90度 */ rotateY(0deg) /* 沿Y轴旋转0度 */ rotateZ(0deg) /* 沿Z轴旋转0度 */ translateX(0px) /* X轴的距离，也就是元素距离观察者的距离 */ translateY(0px) /* X轴的距离，也就是元素距离观察者的距离 */ translateZ(0px) /* Z轴的距离，也就是元素距离观察者的距离 */ scaleX(0) /* X轴的缩放 */ scaleY(0) /* Y轴的缩放 */ scaleZ(0) /* Z轴的缩放 */;
        }

        .css {
            float: left;
            position: absolute;
            top: 240px;
            left: 0px;
            z-index: 999;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box">
        <p>This is a box.</p>
    </div>

</div>
<div class="setting">
    <button id="reload">重置</button>
    <br>
    <!--    perspective：<input type="range" name="perspective" data-type="px" data-v="&#45;&#45;per" min="0" max="400" value="200"/><button>＋</button><button>－</button><br>-->
    <!--    rotateX：<input type="range" name="rotateX" data-type="deg" data-v="&#45;&#45;rx" min="-100" max="100" value="0"/><button>＋</button><button>－</button><br>-->
    <!--    rotateY：<input type="range" name="rotateY" data-type="deg" data-v="&#45;&#45;ry" min="-100" max="100" value="0"/><button>＋</button><button>－</button><br>-->
    <!--    rotateZ：<input type="range" name="rotateZ" data-type="deg" data-v="&#45;&#45;rz" min="-100" max="100" value="0"/><button>＋</button><button>－</button><br>-->
    <!--    translateX：<input type="range" name="translateX" data-type="px" data-v="&#45;&#45;tx" min="-100" max="100" value="0"/><button>＋</button><button>－</button><br>-->
    <!--    translateY：<input type="range" name="translateY" data-type="px" data-v="&#45;&#45;ty" min="-100" max="100" value="0"/><button>＋</button><button>－</button><br>-->
    <!--    translateZ：<input type="range" name="translateZ" data-type="px" data-v="&#45;&#45;tz" min="-100" max="100" value="0"/><button>＋</button><button>－</button><br>-->
    <!--    scaleX：<input type="range" name="scaleX" data-type="" min="-100" max="100" value="0"/><br>-->
    <!--    scaleY：<input type="range" name="scaleY" data-type="" min="-100" max="100" value="0"/><br>-->
    <!--    scaleZ：<input type="range" name="scaleZ" data-type="" min="-100" max="100" value="0"/><br>-->
    <!--    skewX：<input type="range" name="skewX" data-type="deg" min="-100" max="100" value="0"/><br>-->
    <!--    skewY：<input type="range" name="skewY" data-type="deg" min="-100" max="100" value="0"/><br>-->
</div>
<div class="css">
        <textarea id="css" rows="15" cols="30">

        </textarea>
</div>
<script>


    function onload() {
        let eles = [
            {
                "name": "perspective",
                "type": "px",
                "cssVar": "--per",
                "min": 0,
                "max": 400,
                "value": 200
            },
            {
                "name": "rotateX",
                "type": "deg",
                "cssVar": "--rx",
                "min": -100,
                "max": 100,
                "value": 0
            },
            {
                "name": "rotateY",
                "type": "deg",
                "cssVar": "--ry",
                "min": -100,
                "max": 100,
                "value": 0
            },
            {
                "name": "rotateZ",
                "type": "deg",
                "cssVar": "--rz",
                "min": -100,
                "max": 100,
                "value": 0
            },
            {
                "name": "translateX",
                "type": "px",
                "cssVar": "--tx",
                "min": -100,
                "max": 100,
                "value": 0
            },
            {
                "name": "translateY",
                "type": "px",
                "cssVar": "--ty",
                "min": -100,
                "max": 100,
                "value": 0
            },
            {
                "name": "translateZ",
                "type": "px",
                "cssVar": "--tz",
                "min": -100,
                "max": 100,
                "value": 0
            },
            {
                "name": "scaleX",
                "type": "",
                "cssVar": "--sx",
                "min": -10,
                "max": 10,
                "value": 1
            },
            {
                "name": "scaleY",
                "type": "",
                "cssVar": "--sy",
                "min": -10,
                "max": 10,
                "value": 1
            },
            {
                "name": "scaleZ",
                "type": "",
                "cssVar": "--sz",
                "min": -10,
                "max": 10,
                "value": 1
            }
        ];

        let setting = document.querySelector(".setting")
        let html = document.querySelector("body")
        for (let i = 0; i < eles.length; i++) {
            let documentFragment = document.createDocumentFragment();
            let label = document.createElement("label")
            label.textContent = eles[i].name;
            documentFragment.appendChild(label)

            let input = document.createElement("input")
            input.type = "range"
            input.name = eles[i].name
            input.setAttribute("data-type", eles[i].type)
            input.setAttribute("data-cssVar", eles[i].cssVar)
            input.setAttribute("min", eles[i].min)
            input.setAttribute("max", eles[i].max)
            input.setAttribute("value", eles[i].value)
            input.addEventListener("change", function () {
                html.style.setProperty(`${this.getAttribute("data-cssVar")}`, this.value + `${this.getAttribute("data-type")}`)
                showCss()
            })
            documentFragment.appendChild(input)

            let jia = document.createElement("button")
            jia.textContent = "＋"
            jia.addEventListener("click", function () {
                input.value++;
                html.style.setProperty(`${input.getAttribute("data-cssVar")}`, input.value + `${input.getAttribute("data-type")}`)
                showCss()
            })
            documentFragment.appendChild(jia)

            let jian = document.createElement("button")
            jian.textContent = "－"
            jian.addEventListener("click", function () {
                input.value--;
                html.style.setProperty(`${input.getAttribute("data-cssVar")}`, input.value + `${input.getAttribute("data-type")}`)
                showCss()
            })
            documentFragment.appendChild(jian)

            let br = document.createElement("br")
            documentFragment.appendChild(br)

            setting.appendChild(documentFragment)
        }

        let cssTextArea = document.getElementById("css")
        let showCss = function () {
            let ranges = document.querySelectorAll("input[type=range]")
            let txt = "{\n"
            for (let i = 0; i < ranges.length; i++) {
                txt += `\t${ranges[i].getAttribute("name")}: ${ranges[i].value}${ranges[i].getAttribute("data-type")};\n`;
            }
            cssTextArea.value = txt + "}"
        }
        showCss()
        let reload = function () {
            for (let i = 0; i < eles.length; i++) {
                document.querySelector(`input[name=${eles[i].name}]`).value = eles[i].value
                document.querySelector(`input[name=${eles[i].name}]`).dispatchEvent(new Event("change"))
            }
        }
        document.getElementById("reload").addEventListener("click", reload)
    }

    window.addEventListener("load", onload)
</script>
</body>
</html>